<!--
  title：对话框的标题
  confirmLoading：当前是否处于提交中
  titleCenter：对话框标题居中方式
  footerCenter：底部按钮的对其方式
  visible：是否显示弹窗
  width：设置对话框的宽度
  beforeClose：允许您指定在对话框关闭之前将调用的函数
  closeOnClickModal：确定单击对话框外部（在模态叠加层上）是否会关闭对话框
  center：控制对话框是否在屏幕中央
  customClass：允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框
  showFooter：确定是否显示带有“取消”和“确认”按钮的默认页脚
 -->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :width="width"
    :before-close="handleBeforeClose"
    :close-on-click-modal="closeOnClickModal"
    :center="center"
    :custom-class="customClass"
    :show-close="showClose"
  >
    <div
      slot="title"
      :style="{
        textAlign: titleCenter,
        'font-size': '16px',
        'font-weight': 'bold',
      }"
    >
      <span class="hsk"></span>
      <span class="title">{{ title }}</span>
    </div>
    <slot></slot>
    <div
      slot="footer"
      v-if="showFooter"
      :style="{ 'text-align': footerCenter }"
      class="dialog-footer"
    >
      <el-button class="cancel-btn" @click="handleCancel" size="small">
        取消
      </el-button>
      <el-button
        class="primary-btn"
        type="primary"
        :loading="confirmLoading"
        @click="handleConfirm"
        size="small"
      >
        {{ confirmLoading ? '提交中' : '确  定' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'hsk-dialog',
    props: {
      title: {
        //对话框的标题
        type: String,
        default: '',
      },
      confirmLoading: {
        //当前是否处于提交中
        type: Boolean,
        default: false,
      },
      titleCenter: {
        //对话框标题居左方式
        type: String,
        default: 'left',
      },
      footerCenter: {
        //底部按钮的对其方式
        type: String,
        default: 'center',
      },
      visible: {
        //是否显示弹窗
        type: Boolean,
        default: false,
      },
      width: {
        //设置对话框的宽度
        type: String,
        default: '400px',
      },
      showClose: {
        //是否显示右上角
        type: Boolean,
        default: true,
      },
      beforeClose: {
        //允许您指定在对话框关闭之前将调用的函数
        type: Function,
        default: null,
      },
      closeOnClickModal: {
        //确定单击对话框外部（在模态叠加层上）是否会关闭对话框
        type: Boolean,
        default: true,
      },
      center: {
        //控制对话框是否在屏幕中央 ( true) 或不在屏幕中央 ( false)。
        type: Boolean,
        default: true,
      },
      customClass: {
        //允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框
        type: String,
        default: '',
      },
      showFooter: {
        //确定是否显示带有“取消”和“确认”按钮的默认页脚
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        dialogVisible: this.visible,
      }
    },
    watch: {
      visible(newValue) {
        this.dialogVisible = newValue
      },
      dialogVisible(newValue) {
        this.$emit('update:visible', newValue)
      },
    },
    methods: {
      handleBeforeClose(done) {
        if (this.beforeClose) {
          this.beforeClose(done)
        } else {
          done()
        }
      },
      handleCancel() {
        // this.$emit('update:visible', false);
        this.dialogVisible = false
        this.$emit('cancel')
      },
      handleConfirm() {
        if (!this.confirmLoading) {
          // this.dialogVisible = false;
          this.$emit('confirm')
        }
      },
    },
  }
</script>

<style scoped>
  /* Add your custom styles here */
  /deep/.el-dialog {
    border-radius: 12px;
  }
  /deep/.el-dialog__body {
    padding: 0 40px 40px 40px !important;
  }
  /deep/.el-dialog__header {
    padding: 40px !important;
  }
  /deep/ .el-dialog__close {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
  }
  .dialog-footer {
    margin-top: 10px;
    text-align: right;
  }
  .el-openDialog__header {
    margin-bottom: 10px;
  }
  .el-dialog__footer {
    margin-bottom: 31px;
  }
  .cancel-btn {
    box-sizing: border-box;
    width: 80px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #707070;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
  }
  .primary-btn {
    box-sizing: border-box;
    width: 80px;
    height: 36px;
    margin-left: 20px;
    background: #0759c4;
    border-radius: 2px 2px 2px 2px;
  }
  .hsk {
    display: inline-block;
    width: 4px;
    height: 20px;
    vertical-align: middle;
    background: #6b1ce9;
    border-radius: 3px;
  }
  .title {
    margin-left: 10px;
    font-size: 18px;
    color: #333;
    vertical-align: middle;
  }
</style>
